<template>
	<view class="answerRob">
		<navbar></navbar>
		<view class="answerRob-top" >
			<image src="../../../static/帮助蓝.png" mode="" @click="helpHandler"></image>
			<view class="answerRob-top-vw" style="background-color: #EBEDF0;">
				<tui-tabs :tabs="tabs"
					:currentTab="currentTab" 
					@change="change" 
					width="300"
					bold="true"
					selectedColor="black"
					sliderWidth="50"
					sliderBgColor="black"
					backgroundColor="#EBEDF0"
					></tui-tabs>
			</view>
		</view>
		<view class="answerRob-container" >
			<view v-if="currentTab == 0" class="answerRob-container-one">
				<view class="answerRob-container-one-vw" style="margin-bottom: 10rpx;"  v-for="item in list" :id="item.id">
					<view class="Rob-container-one">
						<view class="Rob-container-one-top">
							<image src="../../../static/绿短信.png" mode=""></image>
							<text class="tx1">{{item.time}}</text>
							<text class="tx2">{{item.province}} {{item.city}}</text>
						</view>
					</view>
					<view class="answerRob-container-content">{{item.content}}</view>
					<view class="answerRob-container-bottom">
						<view class="answerRob-container-bottom-btn">
							<van-button plain hairline round type="info" size="small" @click="jump(item)">跳过</van-button>
							<van-button round type="info" size="small" color="#0070af" @click="mashang(item)">马上抢</van-button>
						</view>
					</view>
				</view>
			</view>
			<view v-if="currentTab == 1" class="answerRob-container-one">
				<view class="answerRob-container-one-vw" style="margin-bottom: 10rpx;"  v-for="item in list" :id="item.id">
					<view class="Rob-container-one">
						<view class="Rob-container-one-top">
							<image src="../../../static/绿短信.png" mode=""></image>
							<text class="tx1">{{item.time}}</text>
							<text class="tx2">{{item.province}} {{item.city}}</text>
						</view>
					</view>
					<view class="answerRob-container-content">{{item.content}}</view>
					<view class="answerRob-container-bottom">
						<view class="answerRob-container-bottom-btn">
							<van-button plain hairline round type="info" size="small" @click="jump(item)">跳过</van-button>
							<van-button round type="info" size="small" color="#0070af" @click="mashang(item)">马上抢</van-button>
						</view>
					</view>
				</view>
			</view>
			<!-- <view v-if="currentTab == 2" class="answerRob-container-two">
				<view><van-button icon="add-o" type="info" size="small" round>发起</van-button></view>
				<view class="answerRob-container-two-view">
					<image src="../../../static/暂无内容.png" mode=""></image>
					<text>咦，还没有数据呢~</text>
				</view>
			</view> -->
			<view v-if="currentTab == 2" class="answerRob-container-three">
				<view class="answerRob-container-three-top" v-for="item in coopList" :key="item.id" @click="xzxq(item)">
					<text class="tx1">{{item.content}}</text>
					<text class="tx2">状态: {{item.statusname}}</text>
					<text class="tx3">创建时间：{{item.add_time}}</text>
				</view>
			</view>
		</view>
		<!-- 近期案源情况 -->
		<view>
			<tui-modal :show="modal" custom width="93%">
				<view class="tui-modal-custom">
					<text>近期达成委托案源情况</text>
					<view class="tui-modal-custom-con" v-for="item in 5">
						<view>
							<image src="../../../static/人员图片.png" mode="" style="width: 80rpx; height: 80rpx;"></image>
						</view>
						<view>
							<view class="top">史红雨<text>律师</text></view>
							<view class="bottom"> 敖长江<text>推荐，委托律师成案</text></view>
						</view>
						<text style="color: red;">￥5,000</text>
					</view>
					<view class="aaa"><van-icon name="close" color="white" size="35px" @click="hideModal" /></view>
				</view>
			</tui-modal>
			<tui-modal :show="open" custom width="93%">
				<view class="tui-modal-vw">
					<view class="tui-modal-vwone">
						<text>今日解答免费问题数：<text class="tui-modal-vw-text">0</text> 个</text>
						<text>今日抢答付费问题数：<text class="tui-modal-vw-text">0</text> 个</text>
						<text>7日内解答免费问题数：<text class="tui-modal-vw-text">0</text> 个</text>
					</view>
					<view class="tui-modal-vwtwo">
						<text>昨日收入：<text class="tui-modal-vw-text">0</text> 元</text>
						<text>累计收入：<text class="tui-modal-vw-text">0</text> 元</text>
					</view>
				</view>
				<tui-button type="gray-primary" plain @click="closeModal">我知道了</tui-button>
			</tui-modal>
		</view>
		<view class="answerRob-view">
			<image src="../../../static/接洽案件.png" mode="" @click="openModal"></image>
			<image src="../../../static/审批流程.png" mode="" @click="showModal"></image>
		</view>
		<view style="height: 168rpx;">
			<fivetabber mytabber="2"></fivetabber>
		</view>
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs.vue"
	import tuiCard from "@/components/thorui/tui-card/tui-card.vue"
	import tuiButton from "@/components/thorui/tui-button/tui-button.vue"
	import tuiTabbar from "@/components/thorui/tui-tabbar/tui-tabbar.vue"
	import tuiModal from "@/components/thorui/tui-modal/tui-modal.vue"
	import { serverURL, token } from "../../../services/httpService"
	import { rushList, getcoop, getlawyerDetail, taking_orders, diecoop } from "../../../utils/utils"
	import Toast from '@vant/weapp/dist/toast/toast';
	export default {
		components:{
			tuiTabs,
			tuiCard,
			tuiButton,
			tuiTabbar,
			tuiModal
		},
		data() {
			return {
				currentTab: 0,
				current: 0,
				modal: false, // 模态框
				open: false, //模态框
				tabs: [
					{
						name: "抢答"
					}, {
						name: "价值案源"
					}, {
						name: "协作"
					},
				],
				list: [], // 抢答初始数据
				page: '1', // 律师咨询页数
				page1: '1', // 协作列表页面
				coopList: [], // 协作列表数据
			};
		},
		methods: {
			// 头部标签页事件
			change(e) {
				this.currentTab = e.index
				// console.log(this.currentTab );
			},
			//打开收入组件
			showModal() {
				this.modal = true;
			},
			//关闭收入组件
			hideModal() {
				this.modal = false;
			},
			// 近期案源打开
			openModal() {
				this.open = true;
			},
			//关闭近期案源组件
			closeModal() {
				this.open = false;
			},
			// 跳转到帮助页面
			helpHandler () {
				uni.navigateTo({
					url: "/pages/Attorney side/helpPage/helpPage"
				})
			},
			// 跳过按钮逻辑
			jump (item) {
				console.log(item);
				let id = item.id
				uni.request({
					url:  `${serverURL}/api/skip`,
					method: "POST",
					header: {
						Authorizationpas: `Bearer ${token}`,
					},
					data: {
						oid: id
					},
					success:(res) => {
						console.log('跳过',res.data);
						// this.rushList()
					}
				})
			},
			// 马上抢按钮逻辑
			mashang (item) {
				let id = {
					id: item.id
				}
				// console.log(id);
				taking_orders(id, (e) => {
					console.log('抢答', e);
				})
			},
			// 跳转到协作详情
			xzxq (i) {
				// console.log(i);
				uni.navigateTo({
					url: `/pages/Attorney side/xzxqPage/xzxqPage?id=${i.id}`
				})
			}
		},
		onLoad() {
			let a = {
				page: '1'
			}
			// 律师咨询列表
			rushList(a, (res) => {
				// console.log('律师咨询列表',res.data.data.data);
				this.list = res.data.data.data
				// console.log(this.list);
			})
			// 协作列表
			let b = {
				page: this.page1
			}
			getcoop(b, (e) => {
				console.log('协作列表', e);
				this.coopList = [...e.data.data.data]
				// console.log(this.coopList);
			})
		}
	}
</script>

<style lang="scss" scoped>

	.answerRob-container-one-vw {
		width: 90vw;
		background-color: white;
		border-radius: 8px;
		margin: 5px auto;
	}
	.Rob-container-one {
		width: 100%;
		overflow: hidden;
	}
	.Rob-container-one-top {
		font-size: 15px;
		display: flex;
		align-items: center;
		margin: 15px 0 0 15px;
	}
	.Rob-container-one-top > image {
		width: 40rpx;
		height: 40rpx;
	}
	.Rob-container-one-top > .tx1 {
		margin: 0 5px 0 5px;
	}
	.Rob-container-one-top > .tx2 {
		color: #9e9e9e;
	}
	
	.answerRob-container-content {
		width: 82vw;
		margin: 5px auto;
	}
	.answerRob-top-vw {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tui-default-text {
		width: 89%;
		display: block;
		margin: 0 auto;
		font-weight: 600;
	}
	.answerRob-container-bottom {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}	
	.answerRob-container-bottom-btn {
		width: 150px;
		height: 40px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.answerRob {
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}
	.answerRob-top {
		position: relative;
	}
	.answerRob-top > image {
		width: 52rpx;
		height: 52rpx;
		position: absolute;
		top: 16rpx;
		right: 18rpx;
	}	
	
	.answerRob-container {
		background: #EDEDED;
		
	}
	.answerRob-container-one {
		width: 100vw;
		overflow: hidden;
		height: 100vh;
	}
	.answerRob-container-one-btn {
		width: 50%;
		display: flex;
		justify-content: space-around;
		float: right;
		margin-bottom: 5px;
	}

	.answerRob-view {
		width: 64rpx;
		height: 144rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		right: 20rpx;
		bottom: 240rpx;
	}
	.answerRob-view > image {
		display: block;
		width: 64rpx;
		height: 64rpx;
	}
	
	.tui-modal-custom {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		position: relative;
	}
	.tui-modal-custom-con {
		width: 690rpx;
		height: 100%;
		margin-top: 8rpx;
		display: flex;
		align-items: center;
	}
	.tui-modal-custom-con > text {
		margin-left: 140rpx;
	}
	.tui-modal-custom-con > view {
		margin-left: 30rpx;
	}
	.tui-modal-custom-con > view > .top {
		font-size: 32rpx;
		font-weight: 500;
	}
	.tui-modal-custom-con > view > .top > text {
		font-size: 24rpx;
		font-weight: normal;
		margin-left: 10rpx;
	}
	.tui-modal-custom-con > view > .bottom {
		font-size: 20rpx;
		font-weight: 500;
	}
	.tui-modal-custom-con > view > .bottom > text {
		color: #c2c4c5;
	}
	.tui-modal-custom > image {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		left: 45%;
		bottom: -140rpx;
	}
	
	.tui-modal-vw {
		margin-bottom: 40rpx;
	}
	.tui-modal-vw > .tui-modal-vwone {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
	}
	.tui-modal-vw-text {
		font-weight: bold;
	}
	.tui-modal-vwtwo {
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
	}

	.answerRob-container-two {
		width: 97%;
		height: 100vh;
	}
	// .answerRob-container-two > view:nth-child(1) {
	// 	display: flex;
	// 	justify-content: flex-end;
	// }
	// .answerRob-container-two-view {
	// 	display: flex;
	// 	flex-direction: column;
	// 	justify-content: center;
	// 	align-items: center;
	// 	margin-top: 120rpx;
	// 	font-size: 24rpx;
	// 	color: #666666;
	// }
	// .answerRob-container-two-view > image {
	// 	width: 400rpx;
	// 	height: 240rpx;
	// }
	
	.answerRob-container-three {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.answerRob-container-three > view {
		width: 95%;
		height: 200rpx;
		margin-bottom: 20rpx;
		border-radius: 24rpx;
		background-color: white;
	}
	.answerRob-container-three-top {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	.answerRob-container-three-top > .tx1 {
		font-weight: bold;
		width: 94%;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;  
		overflow: hidden;
	}
	.answerRob-container-three-top > .tx2 {
		font-size: 24rpx;
		width: 94%;
		color: #C0C0C0;
	}
	.answerRob-container-three-top > .tx3 {
		font-size: 28rpx;
		width: 94%;
	}
	
	.aaa {
		width: 50px;
		height: 50px;
		position: absolute;
		left: 40%;
		bottom: -80px;
	}
</style>
